<template>
    <div class="pan-list">
        <div class="volume">
            <volume
                :total="sumnum"
                :used="usenum"
                :statisticId="statisticId"
                :afterBuy="afterBug"
            ></volume>
        </div>

        <div class="content-body">
            <el-tabs v-model="activeName" lazy @tab-click="queryData">
                <el-tab-pane label="全部" name="all">
                    <file-item
                        v-for="item in tableData_all"
                        :key="item.rowguid"
                        :data="item"
                        @reload="queryData"
                        @word="wordHandler"
                        :hidedel="calcHideDel(item)"
                    ></file-item>

                    <template v-if="!tableData_all.length">
                        <div class="be-center">
                            <btn-empty @click="uploadOpen('yyzz')" text="上传营业执照或员工证件及资格证书" type="pic"></btn-empty>

                            <btn-empty @click="uploadOpen" text="上传投标文件"></btn-empty>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="图片" name="jpg">
                    <file-item
                        v-for="item in tableData_jpg"
                        :key="item.rowguid"
                        :data="item"
                        @reload="queryData"
                        @word="wordHandler"
                        :hidedel="calcHideDel(item)"
                    ></file-item>

                    <btn-empty v-if="!tableData_jpg.length" class="be-center" @click="uploadOpen('yyzz')" text="上传营业执照或员工证件及资格证书" type="pic"></btn-empty>
                </el-tab-pane>
                <el-tab-pane label="文档" name="doc">
                    <file-item
                        v-for="item in tableData_doc"
                        :key="item.rowguid"
                        :data="item"
                        @reload="queryData"
                        @word="wordHandler"
                        :hidedel="calcHideDel(item)"
                    ></file-item>

                    <btn-empty v-if="!tableData_doc.length" class="be-center" @click="uploadOpen('qt')" text="上传投标文件"></btn-empty>
                </el-tab-pane>
            </el-tabs>

            <el-button 
            v-if="(sumnum-0) > (usenum-0)"
            class="btn-upload"
            type="text"
            @click="uploadOpen"
            v-czc="['投标方案制作', '点击按钮' , '上传',0 ,'biddingfiletool-btn-unload']"
            >
                上传
            </el-button>
        </div>

        <dialog-upload 
            ref="du"
            v-model="dialogVisible"
            @reload="queryData"
        ></dialog-upload>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import storage from '@js/storage'
import FileItem from './file-item';
import Volume from './volume';
import BtnEmpty from './btn-empty.vue';
import DialogUpload from './dialog-upload/dialog-upload.vue';

export default {
    components: {
        FileItem,
        Volume,
        BtnEmpty,
        DialogUpload,
    },
    props: {
        lockguid: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            activeName: 'all',

            dialogVisible: false,
            dialogData: {},

            tableData_all: [],
            tableData_jpg: [],
            tableData_doc: [],

            sumnum: '-',
            usenum: '-',
        };
    },
    computed: {
        ...mapGetters({
            statisticData: 'userinfo/getStatisticData',
        }),
        statisticId(){
            var statisticData = this.statisticData || [];

            let arr = statisticData.filter(item => item.name == "云盘升级");
            
            if (arr.length > 0){
                return arr[0].rowguid;
            }else {
                return ""
            }
        },
    },
    methods: {
        ...mapActions({
            queryStatisticData: 'userinfo/queryStatisticData',
        }),
        queryData() {
            var activeName = this.activeName;

            if (activeName === 'all') {
                activeName = '';
            }

            this.$get(`${this.$store.state.api.sysUrl}/file/bidding/plan/pglist.json`, {
                filetype: activeName,
            }, data => {
                var key = `tableData_${this.activeName}`;

                this[key] = data.list || [];

                this.sumnum = data.sumnum;
                this.usenum = data.usenum;
            });
        },
        wordHandler(e) {
            this.$emit('word', e);
        },
        uploadOpen(type) {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                if (typeof type === 'string') {
                    this.$refs.du.typecode = type || 'qt';
                }

                this.dialogVisible = true;
            });
        },
        calcHideDel(data) {
            if (data.rowguid === this.lockguid) {
                return true;
            }
            
            return false;
        },
        afterBug(){
            this.queryData();
            this.queryStatisticData();
        }
    },
    mounted() {
        this.$store.dispatch('userinfo/checkIsLoginNoDoing',{
            login:()=>{
                this.queryData();
                this.queryStatisticData();
            },
        })
    },
};
</script>

<style lang="scss" scoped>
    .pan-list{
        height: 100%;
        background: white;
        padding: 0 12px;

        .content-body{
            height: calc(100% - 82px);
            position: relative;

            .btn-upload{
                position: absolute;
                right: 0;
                top: 0;
            }
        }

        ::v-deep{
            .el-tabs{
                height: 100%;

                .el-tabs__content{
                    height: calc(100% - 55px);

                    .el-tab-pane{
                        height: 100%;
                        overflow-y: auto;
                        overflow-x: hidden;
                        padding: 0 8px;
                    }
                }
            }

            .el-tabs__nav-wrap.is-top{
                &:after{
                    content: none;
                }
            }
        }

        .be-center{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50% ,-50%);
            width: 100%;
        }
    }
</style>